<template>
	<view class="container">
		<view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$common.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">【{{walletInfo.accountGroupName}}】提现</view>
		</view>
		<!-- 提现方式选择 -->
		<block v-if="cashWithdrawalWay==1">
			<view class="withDrawWay">
				<view class="mark" style="padding-left: 30rpx;">微信号</view>
				<view class="select" @click="btnBindWX">
					<image :src="wx.faceImg" mode="aspectFit" class="face"></image>
					<view style="margin:auto;">{{wx.nickname}}</view>
				</view>
			</view>
		</block>
		<block v-if="cashWithdrawalWay==3">
			<view class="con margin-bottom">
				<view class="uploadWrap">
					<view class="upload" @click="toBindQrcode()">
						<block v-if="wxIncomeQrcodeUrl">
							<image :src="wxIncomeQrcodeUrl" mode="aspectFill"></image>
						</block>
						<text>点击管理收款码</text>
					</view>
				</view>
			</view>
		</block>
		<!-- 提现执行框 -->
		<view class="con margin-top">
			提现金额
			<view class="money"><input type="digit" v-model="money"/></view>
			<view class="tip">
				可提现金额：<text style="color: #007AFF;"> ￥{{walletInfo.withdrawalMoney}}</text>
			</view>
			<view class="tip">单笔提现范围：{{walletInfo.minMoney}}～{{walletInfo.maxMoney}}元</view>
			<view class="tip">日提现限额：{{walletInfo.dayUserMaxMoney}}元</view>
			<view class="tip" v-if="walletInfo.serviceCharge > 0">
				提现手续费：<text style="color: #ff231e;"> {{walletInfo.serviceCharge}}%</text>
			</view>
			<view class="tip" v-else>无提现手续费</view>
			<view class="tip">每月提现日：{{walletInfo.monthStartDay}}号 - {{walletInfo.monthEndDay}}号</view>
			<view class="tip">提现时间：{{walletInfo.cashWithdrawalTimes}}</view>
			<view class="buttonArea">
				<view class="btn-withdraw deep" v-if="cashWithdrawalWay==1 && walletInfo.wxBindType==0">微信提现未开启</view>
				<view class="btn-withdraw" v-else @click="withdrawDeposit">立即提现</view>
				<view @click="showModal='select'" class="otherWay">切换提现方式</view>
			</view>
		</view>
		
		<view :class="'pop-confirm '+(showModal=='select'?'show':'')">
			<view class="pop-tit">
				切换提现方式<text class="btn-close cuIcon-close" @click="showModal=null"></text>
			</view>
			<block v-for="(item,index) in withdrawWay" :key="index">
				<view class="item" @click="selThisWay" :data-index="item.id">{{item.name}}</view>
			</block>
		</view>
		
		<view :class="'pop-confirm '+(showModal=='selectWX'?'show':'')">
			<view class="pop-tit">
				切换微信号<text class="btn-close cuIcon-close" @click="showModal=null"></text>
			</view>
			<view class="item text-center" @click="toBindWX">
				<button class="cu-btn bg-orange" style="margin:auto;">新增提现微信号</button>
			</view>
			<block v-for="(item,index) in wxItems" :key="index">
				<view class="item flex" @click="btnSelectWX" :data-index="index">
					<image :src="item.faceImg" mode="aspectFit" class="face"></image>
					<view>{{item.nickname}}</view>
				</view>
			</block>
		</view>
		
	</view>
</template>

<script>
	const wx = require('@/js_sdk/jweixin.js'); 
	export default {
		data() {
			return {
				appId:null,
				money:0,				//提现金额
				walletInfo:{},
				cashWithdrawalWay:3,    //支付方式  1微信  3二维码

				showModal:null, //当前开启的夹层
				withdrawWay:[        //支付方式
					{id:1,name:"微信号提现",class:"ico-wx"},
					// {id:2,name:"银行卡提现",class:"ico-card"},
					{id:3,name:"付款码提现",class:"ico-qr"},
				],
				wx:{
					nickname:'未绑定微信号',
					faceImg:'/static/def_face.jpg',
					openId:null
				},
				wxItems:[],
				bank:{
					bankType:1,
					bankName:'中国银行',
					cardNo:123
				},
				wxIncomeQrcodeUrl:null
			}
		},
		onLoad(option) {
			this.appId = this.$store.getters.GET_AppId;
			if(option.way){
				this.cashWithdrawalWay = option.way;
			}
			if(option.id){
				this.walletInfo.accountGroupId = option.id;
			}else{
				uni.showModal({
					title:"系统错误",
					content:"未找到收款账号ID",
					showCancel:false,
					success: (res) => {
						uni.navigateBack();
					}
				})
			}
			this._loadWalletInfo();
		},
		onShow(){
			this._loadTransferInfo();
		},
		methods: {
			//获取提现账号信息
			_loadWalletInfo:function(){
				const api = this.$request;
				const _self = this;
				api.post(api.url.transferWalletInfo,{
					accountGroupId:this.walletInfo.accountGroupId
				},res=>{
					if(res.code==200){
						_self.walletInfo = res.body
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false,
							success: (res) => {
								uni.navigateBack();
							}
						})
					}else{
						uni.showToast({
							title:'获取数据失败',
							mask:true,
							icon:'error',
							complete: (res) => {
								setTimeout(() => {
									uni.navigateBack();
								}, 1500);
							}
						})
					}
				})
			},
			//获取转账渠道
			_loadTransferInfo:function(){
				const api = this.$request;
				const _self = this;
				if(this.cashWithdrawalWay == 1){
					api.post(api.url.transferWxList,{},res=>{
						if(res.code==200){
							_self.wx = res.body.items[0],
							_self.wxItems = res.body.items;
						}
					})
				}else if(this.cashWithdrawalWay == 3){
					api.post(api.url.transferQrInfo,{},res=>{
						if(res.code == 200){
							_self.wxIncomeQrcodeUrl = res.body.qrcodeImg
						}
					})
				}else {
					uni.showModal({
						title:"配置错误",
						content:"未找到可以提现的渠道",
						showCancel:false,
						success: (res) => {
							uni.navigateBack();
						}
					})
				}
			},
			//选择其它转账渠道
			selThisWay(e){
				var index = e.currentTarget.dataset.index;
				this.cashWithdrawalWay = index;
				this.showModal = null;
				this._loadTransferInfo();
			},
			//提现
			withdrawDeposit(){
				if(this.money <= 0){
					uni.showToast({
						title:"提现金额应大于0",
						icon:'none'
					})
					return
				}
				if(this.cashWithdrawalWay == 1){
					if(!this.wx.openId){
						uni.showToast({
							title:"未绑定微信号",
							icon:'none'
						})
						return
					}
				}else if(this.cashWithdrawalWay == 3){
					if(!this.wxIncomeQrcodeUrl){
						uni.showToast({
							title:"未上传收款二维码",
							icon:'none'
						})
						return
					}
				}
				const api = this.$request;
				api.post(api.url.transferApply,{
					accountGroupId:this.walletInfo.accountGroupId,
					type:this.cashWithdrawalWay,
					money:this.money,
					appId:this.appId,
					openId:this.wx.openId
				},res=>{
					if(res.code == 200){
						uni.showModal({
							title:"温馨提示",
							content:'提现申请成功!',
							showCancel:false,
							success() {
								uni.reLaunch({
									url:'./index'
								})
							}
						})
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else{
						uni.showToast({
							title:"操作失败",
							icon:'error'
						})
					}
				})
			},
			btnSelectWX(e){
				var index = e.currentTarget.dataset.index;
				this.showModal = null;
				this.wx = this.wxItems[index];
			},
			toBindQrcode:function(){
				uni.navigateTo({
					url:'./way/qrcode'
				})
			},
			btnBindWX:function(){
				if(!this.wxItems || this.wxItems.length == 0){
					this.toBindWX();
				}else{
					this.showModal = 'selectWX'
				}
			},
			toBindWX:function(){
				uni.navigateTo({
					url:'./way/wxBind'
				})
			},
		},
	}
</script>

<style lang="less">
	.withDrawWay{ 
		height: 150rpx; 
		padding: 0 30rpx; 
		display: flex; 
		justify-content: space-between; 
		align-items: center; 
		color:#24211D; 
		font-size: 28rpx; 
		background: #FFFFFF;
		.select{ 
			position: relative; 
			display: flex;
			align-items: center;
			height:100rpx;
			&::after{ 
				content: "";
				width: 15rpx;
				height: 15rpx;
				border: 4rpx solid;
				border-color: #C1C1C1 #C1C1C1 transparent transparent;
				transform: rotate(45deg);
			}
			.face{width:100rpx;height:100rpx;margin-right:10px;border-radius:15px;}
		}
	}
	.con{
		padding: 30rpx;
		background-color: #FFFFFF;
		.money{
			margin-bottom:25rpx; height: 108rpx; display: flex; align-items: center;border-bottom: 1rpx solid #E1DDDD; position: relative;
			&::before{ content:"￥"; position: absolute; left: 0; top: 23rpx; font-size: 50rpx; font-weight: bold;}
			input{ padding-left: 80rpx; font-size: 60rpx; font-weight: bold;}	
		}
		.tip{ color:#9999AE; font-size: 26rpx; line-height: 39rpx; }
		.buttonArea{
			padding-top: 48rpx; text-align: center;
			.btn-withdraw{
				background:linear-gradient(90deg,#f4b349,#ec7136);
				width: 100%; 
				padding: 20rpx 0;
				margin: 0 auto 20rpx; 
				color:#fff; 
				border-radius: 10rpx; 
				text-align: center; 
				font-size: 30rpx;
				&.deep{
					background:linear-gradient(90deg,#aaa,#999);
				}
			}
			.disabled{ background: #DDDCDC;}
			.otherWay{ color:#80809E;font-size: 24rpx; display: inline-block; border-bottom: 1rpx solid #80809E;}
		}
		.uploadWrap{ 
			width: 280rpx; 
			height: 280rpx; 
			background: #EEEEEE; 
			color:#7E7C7A;
			font-size: 26rpx;
			margin: 0 auto;
			.upload{ 
				position: relative; 
				width: 100%;
				height: 100%;
				image{ width: 100%; height: 100%; position: relative;z-index: 100;}
				text{
					display: block;
					width: 100%;
					position: absolute;
					bottom: 0;
					left: 0;
					z-index: 200;
					text-align: center;
					font-size: 24rpx;
					padding: 10rpx 0;
					background-color: rgba(36, 36, 36, 0.6);
					color: white;
				}
			}
		}
	}
	.mask{ background: rgba(0,0,0,0.52); position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1001;}
	.pop-confirm{ 
		background: #fff;
		position: fixed; 
		left: 0; 
		bottom: 0; 
		width: 100%; 
		z-index: 1002; 
		transform: translateY(100%); 
		padding: 0 15rpx; transition: 
		transform ease-out 0.2s; 
		box-sizing: border-box;
		.pop-tit-ext{ text-align: center; height: 125rpx; border-bottom: 2rpx solid #F4F4F4; display: flex; flex-direction: column; justify-content: center; line-height: 40rpx;
			.tit{ font-size: 28rpx;}
			.subTip{font-size: 22rpx; color:#9A9AAF;}
		}
		.pop-tit{ text-align: center; height: 125rpx; border-bottom: 2rpx solid #F4F4F4; line-height: 125rpx; font-weight: bold;}
		.btn-comfirm{ font-size: 30rpx; color:#157EFB; position: absolute; right: 30rpx; top:0; font-weight: normal;}
		.btn-close{ position: absolute; right: 30rpx; top: 0rpx;}
		.item{ 
			border-bottom: 2rpx solid #F4F4F4;
			font-size: 28rpx; 
			position: relative; 
			display: flex; 
			justify-content: space-between; 
			align-items: center;
			line-height: 40rpx;
			padding: 20rpx 40rpx;
			&.flex{
				justify-content: flex-start;
				align-items: center;
			}
			image{
				width: 80rpx;
				height: 80rpx;
				display: block;
				margin-right: 20rpx;
			}
		}
	}
	.show{transform: translateY(0);}
</style>
